<script>
import { areaList } from "@vant/area-data";
import { public_status } from "../store/public_status";
import { useRouter } from "vue-router";
import { useStore } from "../store/index";
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    // # 数据中心
    let data = reactive({
      isShow: false,
      isChange: null,
      addressInfo: {},
      isDefault: false,
    });

    public_status().display = false;

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userAddress = useStore().userData[userId].address;

    // # 配置路由
    let router = useRouter();

    // # 保存地址
    let onSave = (list) => {
      if (data.isChange != null) {
        userAddress[data.isChange] = Object.assign({}, list);

        data.isChange = null;
        data.addressInfo = {};
      } else {
        if (userAddress.length == 0) {
          list.isDefault = true;
        }
        userAddress.push(Object.assign({}, list));
        
        data.addressInfo = {};
      }

      data.isShow = false;
    };

    // # 编辑地址
    let change = (i) => {
      data.addressInfo = Object.assign({}, userAddress[i]);
      data.isChange = i;
      data.isShow = true;
    };

    // # 删除地址
    let del = (i) => {
      userAddress.splice(i, 1);
    };

    let add = () => {
      if (data.isChange != null) {
        data.isChange = null;
        data.addressInfo = {};
      }
      data.isShow = true;
    };

    // # 修改默认地址
    let changeDefault = (i) => {
      userAddress.forEach((item) => (item.isDefault = false));
      userAddress[i].isDefault = true;
    };

    // # 内部修改地址
    let change_default = () => {
      if (userAddress.length <= 1) {
        userAddress[data.isChange].isDefault = true;
      }
    };

    return {
      data,
      areaList,
      router,
      userAddress,

      onSave,
      change,
      del,
      add,
      changeDefault,
      change_default,
    };
  },
};
</script>

<template>
  <div class="addressView">
    <!-- 头部 -->
    <header class="header">
      <div class="back" @click="router.back()">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="title">Address</div>
      <div class="btn" @click="add">添加</div>
    </header>
    <!-- 头部 -->

    <!-- 地址列表 -->
    <div class="addressList" v-show="!data.isShow">
      <div
        v-for="(item, i) in userAddress"
        :class="['item', { checked: item.isDefault }]"
        :key="i"
      >
        <div class="top">
          <div class="name">{{ item.name }}</div>
          <div class="tel">{{ item.tel }}</div>
        </div>
        <div class="center">
          <div class="address">
            {{ item.province + item.city + item.county }}
          </div>
          <div class="details one-txt-cut">{{ item.addressDetail }}</div>
        </div>
        <div class="bottom">
          <div class="change" @click="change(i)">
            <i class="iconfont icon-bianji"></i>
            <span>编辑</span>
          </div>
          <div class="del" @click="del(i)">
            <i class="iconfont icon-shanchu"></i>
            <span>删除</span>
          </div>
        </div>
        <div class="btn" @click="changeDefault(i)">
          <i
            :class="['iconfont', { 'icon-xuankuang': !item.isDefault }]"
            v-show="!item.isDefault"
          ></i>
          <i
            :class="['iconfont', { 'icon-radio-fill': item.isDefault }]"
            v-show="item.isDefault"
          ></i>
          默认地址
        </div>
      </div>
    </div>
    <!-- 地址列表 -->

    <!-- 地址编辑 -->
    <van-address-edit
      v-show="userAddress.length == 0 || data.isShow"
      show-set-default
      show-search-result
      :area-list="areaList"
      :address-info="data.addressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
  </div>
</template>

<style lang="scss" scoped>
.addressView {
  > header.header {
    height: 56px;
    line-height: 56px;
    text-align: center;

    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    margin-bottom: 10px;

    position: sticky;
    top: 0;
    z-index: 10;

    > .back {
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      margin: auto;

      width: 37px;
      height: 37px;
      line-height: 37px;
      border-radius: 50%;
      background: #f9f9f9;

      > i {
        text-align: center;
      }
    }

    > .title {
      font-size: 18px;
      font-weight: bold;
    }

    > .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      margin: auto;

      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 15px;
      background: #f9f9f9;
    }
  }

  > .addressList {
    padding: 0px 15px;

    > .item {
      padding: 15px;
      margin-bottom: 15px;

      border-radius: 10px;
      background: #fff;
      box-shadow: 3px 3px 5px 5px rgba($color: #f0f0f0, $alpha: 0.77);

      transition: all 0.3s;
      position: relative;

      &.checked {
        background: #333;
        color: #fff;

        .center {
          border-color: #fff;
        }

        .bottom {
          i {
            color: #c0c0c0;
          }
        }
      }

      > .top {
        display: flex;
        align-items: flex-end;
        margin-bottom: 5px;

        > .name {
          font-size: 14px;
          font-weight: bold;
          margin-right: 10px;
        }
      }

      > .center {
        border-bottom: 1px dashed #333;
        padding-bottom: 10px;
        margin-bottom: 10px;

        > .address {
          font-size: 14px;
          line-height: 18px;
          margin-bottom: 5px;
        }

        > .details {
          font-size: 13px;
        }
      }

      > .bottom {
        display: flex;
        justify-content: flex-end;

        > div {
          margin-left: 8px;
          font-size: 13px;
          display: flex;
          align-items: center;
        }

        i {
          margin-right: 3px;
          font-size: 18px;
          color: #444;
        }
      }

      > .btn {
        position: absolute;
        bottom: 15px;
        display: flex;
        align-items: center;

        > i {
          margin-right: 5px;
        }
      }
    }
  }

  // $ 修改组件样式
  ::v-deep .van-form {
    .van-button {
      background: #333;
      border-color: #333;
      font-weight: bolder;
    }

    .van-cell {
      .van-cell__title {
        font-weight: bold;
      }
    }

    .van-switch--on {
      background: #333;
    }
  }
}
</style>